<template>
  <div>
    <div class="demo-inner-divider">带描述信息</div>
    <div class="row" >
      <e-button @click="open(false)">open</e-button>
      <e-button @click="info(false)">Info</e-button>
      <e-button @click="success(false)">Success</e-button>
      <e-button @click="warning(false)">Warning</e-button>
      <e-button @click="error(false)">Error</e-button>
    </div>
    <div class="demo-inner-divider">仅标题</div>
    <div class="row" >
      <e-button @click="open(true)">open</e-button>
      <e-button @click="info(true)">Info</e-button>
      <e-button @click="success(true)">Success</e-button>
      <e-button @click="warning(true)">Warning</e-button>
      <e-button @click="error(true)">Error</e-button>
    </div>
    <div class="demo-inner-divider">自定义关闭时长</div>
    <div class="row">
      <e-button @click="onTime(true)">自定义关闭时长</e-button>
    </div>
    <div class="demo-inner-divider">自定义render，定义描述</div>
    <div class="row">
      <e-button @click="onRenderBasic">自定义基本用法</e-button>
      <e-button @click="onRenderFunc">自定义runder含操作</e-button>
    </div>
    <div class="demo-inner-divider">查看详情跳转</div>
    <e-button @click="toTopLeftCheckDetail">可跳转查看详情</e-button>
    <div class="demo-inner-divider">位置组件</div>
    <div class="row">
      <e-button @click="toTopLeft">左上角</e-button>
      <e-button @click="toTopRight">右上角</e-button>
      <e-button @click="toBottomLeft">左下角</e-button>
      <e-button @click="toBottomRight">右下角</e-button>
    </div>
    <div class="demo-inner-divider">全局方法</div>
    <div class="row">
      <p>请先点击位置组件-右上角按钮，确保右上有通知 调试this.$Notice.close('test')</p>
      <e-button @click="toCloseDefault">close-默认-右上</e-button>

      <p>请先点击位置组件-左上角按钮，确保左上有通知 调试this.$Notice.close('test', 'top-left')</p>
      <e-button @click="toClosePosition">close-position</e-button>

      <p>请先点击位置组件-右上角按钮，确保右上有通知 调试this.$Notice.destroy()</p>
      <e-button @click="toDestroy">destroy</e-button>
      <p>请先点击位置组件-左上角按钮，确保左上有通知 调试this.$Notice.destroy('top-left')</p>
      <e-button @click="toDestroyPosition">destroy-position</e-button>
    </div>
    <read-me  class="markdown-body"></read-me>
  </div>
</template>
<script>
import ReadMe from '../../docs/notice.md';
export default {
  components: { ReadMe },
  methods: {
    open (nodesc) {
      this.$Notice.open({
        duration: 0,
        title: '标题',
        desc: nodesc ? '' : '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    info (nodesc) {
      this.$Notice.info({
        duration: 6,
        title: '标题',
        desc: nodesc ? '' : '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    success (nodesc) {
      this.$Notice.success({
        duration: 6,
        title: '标题',
        desc: nodesc ? '' : '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    warning (nodesc) {
      this.$Notice.warning({
        duration: 6,
        title: '标题',
        desc: nodesc ? '' : '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    error (nodesc) {
      this.$Notice.error({
        duration: 6,
        title: '标题',
        desc: nodesc ? '' : '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    onTime(){
      this.$Notice.success({
        duration: 6,
        title: '设置duration关闭时长',
        desc: '通过设置duration关闭，设置为0，不自动关闭，默认为4.5'
      })
    },
    onRenderFunc(){
      this.$Notice.info({
        title: '标题',
        desc: '只显示 render 的内容',
        duration: 6,
        render: h => {
          return h('div', {
            'class': 'haloe-notice-desc',
            'style': {
              'height': '97px',
              'position': 'relative'
            }
          },
          [
            '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。',
            h('a',{
              href:'http://www.baidu.com',
              target:'_blank',
              'style': {
                'display': 'block',
                'position': 'absolute',
                'bottom': 0,
                'right': 0
              }
            },
            '查看详情'),
          ])
        },
        onClose:()=>{
          console.log("我被关闭了！！！")
        },
        duration:0,
      });
    },
    onRenderBasic () {
      this.$Notice.info({
        title: '标题',
        desc: '只显示 render 的内容',
        duration: 0,
        render: h => {
          return h('div', {
            'class': 'haloe-notice-desc',
            'style': {
              'height': '60px',
            }
          },
          [
            '此处是一条系统级的全局消息。'
          ])
        },
        onClose:()=>{
          console.log("我被关闭了！！！")
        },
        duration:0,
      });
    },
    toTopLeft () {
      this.$Notice.open({
        name: 'test',
        position: 'top-left',
        duration: 0,
        title: '标题',
        desc: '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    toTopLeftCheckDetail() {
      this.$Notice.open({
        detail: {
          text: '查看详情',
          url: 'https://www.baidu.com'
        },
        name: 'test',
        position: 'top-left',
        duration: 0,
        title: '标题',
        desc: '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    toTopRight () {
      this.$Notice.open({
        name: 'test',
        position: 'top-right',
        duration: 0,
        title: '标题',
        desc: '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    toBottomLeft () {
      this.$Notice.open({
        name: 'test',
        position: 'bottom-left',
        duration: 0,
        title: '标题',
        desc: '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    toBottomRight () {
      this.$Notice.open({
        name: 'test',
        position: 'bottom-right',
        duration: 0,
        title: '标题',
        desc: '此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息，此处是一条系统级的全局消息。'
      });
    },
    toCloseDefault () {
      this.$Notice.close('test')
    },
    toClosePosition () {
      this.$Notice.close('test', 'top-left')
    },
    toDestroy () {
      this.$Notice.destroy()
    },
    toDestroyPosition () {
      this.$Notice.destroy('top-left')
    }
  }
}
</script>
<style scoped>
</style>
